<template>
	<view class="loading-mask" v-if="isLoading">
		<image class="loading-image" src="/static/loading.png" mode="aspectFit"></image>
		<text class="loading-text">正在准备请柬...</text>
	</view>
	<view class="content" v-else @touchstart="handleTouch" @click="handleTouch">
		<view class="logo-container">
			<img class="center-image" src="https://files.bigtian.club/bigtian/2024/12/18/20241218143241A001.png" alt="">
			<view class="music-control" data-noscroll="true" @tap.stop="toggleMusic">
				<img class="cheese-icon" :class="{ 'paused': !isPlaying, 'rotating': isPlaying }"
					src="https://files.bigtian.club/bigtian/2024/12/18/20241218153814A029.png">
			</view>
		</view>
		<view class="invitation-container">
			<img class="invitation-image" src="https://files.bigtian.club/bigtian/2024/12/18/20241218143559A003.png" />
		</view>

		<view class="text-container">
			<text class="invitation-text">以前觉得婚礼是一则官方公告</text>
			<text class="invitation-text">现在才明白这是一场人生为数不会的相聚与重逢</text>
			<text class="invitation-text">是千里之外的奔赴</text>
			<text class="invitation-text">是不计得失的支持</text>
			<text class="invitation-text">感谢一路相伴的家人朋友</text>
			<text class="invitation-text">许久不见，甚是想念</text>
		</view>
		<view class="couple-container">
			<view class="person-card">
				<view class="photo-frame">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218142802A003.jpg" alt="新郎"
						class="person-photo">
				</view>
				<text class="role-text">GROOM</text>
				<text class="name-text">代均雄</text>
			</view>
			<view class="double-happiness">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143635A004.png" alt="喜"
					class="double-happiness-image">
			</view>
			<view class="person-card">
				<view class="photo-frame">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218142430A001.jpg" alt="新娘"
						class="person-photo">
				</view>
				<text class="role-text">BRIDE</text>
				<text class="name-text">龙艳华</text>
			</view>
		</view>


		<view class="pic-container">
			<view class="hezhao-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143653A005.png" alt=""
					class="hezhao-image">
			</view>
			<view class="left-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143721A006.png" alt=""
					class="hezhao-image">
			</view>

			<view class="right-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143742A007.png" alt=""
					class="hezhao-image">
			</view>
			<view class="top-right-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143812A008.png" alt=""
					class="hezhao-image">
			</view>
			<view class="bottom-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143906A009.png" alt="" class="
					hezhao-image">
			</view>
			<view class="tom-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143923A010.png" alt="">
			</view>
			<view class="jerry-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218144133A012.png" alt="">
			</view>
			<view class="rigth-cheese-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218144114A011.png" alt="">
			</view>
			<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218144814A015.jpg" alt="" class="pic-image">
		</view>

		<view class="additional-photos">
			<image src="https://files.bigtian.club/bigtian/2024/12/18/20241218145208A016.jpg" mode="aspectFit"
				class="small-photo"></image>
			<image src="https://files.bigtian.club/bigtian/2024/12/18/20241218152319A024.jpg" mode="aspectFit"
				class="small-photo"></image>
			<view class="jerry-tianshi-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218153845A030.png" alt="">
			</view>
			<view class="candy-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218153906A031.png" alt="">
			</view>
		</view>

		<view class="wedding-info">
			<view class="info-title">
				<text class="title-text">WEDDING</text>
				<text class="title-text">INFORMATION</text>
			</view>

			<view class="wedding-calendar-container">
				<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218153930A032.png" class="tom-jerry-image">

				<view class="calendar-right-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143742A007.png" alt=""
						class="hezhao-image">
				</view>
				<view class="calendar-cheese-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218153814A029.png" alt="">
				</view>
				<view class="calendar-top-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143653A005.png" alt="">
				</view>
				<view class="calendar-top-right-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143812A008.png" alt=""
						class="hezhao-image">
				</view>
				<view class="calendar-curve-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218154613A041.png" alt=""
						class="hezhao-image">
				</view>
				<view class="calendar-left-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143721A006.png" alt=""
						class="hezhao-image">
				</view>
				<Calendar :date="selectedGender === 'male' ? data.groomBigLikeDay : data.brideBigLikeDay"
					:lunarDate="selectedGender === 'male' ? data.groomBigLikeLunarDate : data.brideBigLikeLunarDate"
					v-model:gender="selectedGender" />
			</view>
			<view class="map-container" data-noscroll="true" @tap.stop>
				<text class="location-title">婚礼地点</text>
				<view class="gender-switch" data-noscroll="true">
					<text :class="{ active: selectedGender === 'male' }" data-noscroll="true"
						@tap.stop="switchGender('male')">新郎</text>
					<text :class="{ active: selectedGender === 'female' }" data-noscroll="true"
						@tap.stop="switchGender('female')">新娘</text>
				</view>
				<view class="map-wrapper">
					<map class="wedding-map" :latitude="currentLocation.latitude" :longitude="currentLocation.longitude"
						:markers="markers" scale="16" show-location enable-scroll="false" enable-zoom="false"
						enable-rotate="false" enable-overlooking="false" enable-3D="false" enable-poi="false">
					</map>
					<view class="map-overlay" @tap="openLocation"></view>
				</view>
				<text class="location-address" @tap="openLocation">
					{{ selectedGender === 'male' ? '新郎：' : '新娘：' }}{{ currentLocation.address }}
				</text>
				<view class="contact-buttons">
					<button class="contact-btn groom" @click.stop="contactPerson('groom')">
						👨🏻‍⚖️联系新郎
					</button>
					<button class="contact-btn bride" @click.stop="contactPerson('bride')">
						👰🏻‍♀️联系新娘
					</button>
				</view>
			</view>
		</view>

		<view class="ending-section">
			<text class="ending-title">『为我们的那天』</text>
			<view class="ending-grid">
				<view class="ending-left-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218154725A042.png" alt="">
				</view>
				<view class="ending-right-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143653A005.png" alt="">
				</view>
				<view class="ending-bottom-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143721A006.png" alt="">
				</view>
				<view class="ending-jerry-right-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218154613A041.png" alt="">
				</view>
				<view class="ending-jerry-container">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143742A007.png" alt="">
				</view>
				<view class="grid-item">
					<image src="https://files.bigtian.club/bigtian/2024/12/18/20241218154024A034.png" mode="aspectFill">
					</image>
				</view>
				<view class="grid-item couple-photo">
					<image src="https://files.bigtian.club/bigtian/2024/12/18/20241218152836A027.jpg" mode="aspectFill">
					</image>
				</view>
				<view class="grid-item couple-photo">
					<image src="https://files.bigtian.club/bigtian/2024/12/18/20241218153006A028.jpg" mode="aspectFill">
					</image>
				</view>
				<view class="grid-item">
					<image src="https://files.bigtian.club/bigtian/2024/12/18/20241218154044A035.png" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<view class="wedding-process">
			<view class="process-title">
				<text>WEDDING PROCESS</text>
			</view>
			<view class="process-container">
				<view class="process-row">
					<view class="time-label">
						<text>09:00 迎宾接待</text>
					</view>
					<image class="church-icon"
						src="https://files.bigtian.club/bigtian/2024/12/18/20241218154138A037.png" mode="aspectFit">
					</image>

				</view>

				<view class="process-row">
					<image class="car-icon" src="https://files.bigtian.club/bigtian/2024/12/18/20241218154119A036.png"
						mode="aspectFit"></image>
					<view class="time-label">
						<text class="time">13:30 接亲</text>
					</view>
				</view>

				<view class="process-row">
					<view class="time-label">
						<text>14:00 拦门游戏</text>
					</view>
					<image class="ring-icon" src="https://files.bigtian.club/bigtian/2024/12/18/20241218154223A038.png"
						mode="aspectFit"></image>
				</view>

				<view class="process-row">
					<image class="wine-icon" src="https://files.bigtian.club/bigtian/2024/12/18/20241218154235A039.png"
						mode="aspectFit"></image>
					<view class="time-label">
						<text>15:00 晚宴</text>
					</view>
				</view>
			</view>
			<view class="love-quote">
				<text>我们一直相信</text>
				<text>这个世界上一定存在一种爱情</text>
				<text>如同宿命般无从逃脱不可取代</text>
				<text>生命中最好的时光是</text>
				<text>和你变成了"我们"</text>
			</view>
			<view class="photo-moment-container">
				<view class="photo-frame-border">
					<image class="wedding-moment"
						src="https://files.bigtian.club/bigtian/2024/12/18/20241218152718A026.jpg" mode="aspectFill">
					</image>
					<!-- <view class="frame-decorations"> -->
					<image class="photo-cheese-top"
						src="https://files.bigtian.club/bigtian/2024/12/18/20241218144114A011.png" mode="aspectFit">
					</image>
					<image class="deco-cheese-bottom"
						src="https://files.bigtian.club/bigtian/2024/12/18/20241218153814A029.png" mode="aspectFit">
					</image>
					<image class="jerry-cheese-image"
						src="https://files.bigtian.club/bigtian/2024/12/18/20241218154256A040.png" mode="aspectFit">
					</image>
					<image class="like-heart-icon"
						src="https://files.bigtian.club/bigtian/2024/12/18/20241218143635A004.png" mode="aspectFit">
					</image>
					<image class="deco-tom-bottom"
						src="https://files.bigtian.club/bigtian/2024/12/18/20241218154754A043.png" mode="aspectFit">
					</image>

					<view class="curve-deco-top">
						<image class="curve-top-image"
							src="https://files.bigtian.club/bigtian/2024/12/18/20241218143906A009.png"
							mode=" aspectFit">
						</image>
					</view>
					<image class="love-number-image"
						src="https://files.bigtian.club/bigtian/2024/12/18/20241218154810A044.png" mode="aspectFit">
					</image>
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143721A006.png" class="left-image"
						alt="">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218154613A041.png" class="curve-image"
						alt="">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218154725A042.png"
						class="three-right-image" alt="">
					<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143742A007.png" alt=""
						class="right-image">

					<!-- </view> -->
				</view>

			</view>
		</view>

		<view class="countdown-container">
			<text class="countdown-title">RSVP</text>
			<view class="countdown-boxes">
				<view class="countdown-box">
					<text class="count">{{ countdownDays }}</text>
					<text class="unit">天</text>
				</view>
				<view class="countdown-box">
					<text class="count">{{ countdownHours }}</text>
					<text class="unit">时</text>
				</view>
				<view class="countdown-box">
					<text class="count">{{ countdownMinutes }}</text>
					<text class="unit">分</text>
				</view>
				<view class="countdown-box">
					<text class="count">{{ countdownSeconds }}</text>
					<text class="unit">秒</text>
				</view>
			</view>
		</view>

		<view class="final-photo-frame">
			<image class="final-couple-photo" src="https://files.bigtian.club/bigtian/2024/12/18/20241218152555A025.jpg"
				mode="aspectFill">
			</image>
			<image class="final-deco-jerry" src="https://files.bigtian.club/bigtian/2024/12/18/20241218154829A045.png"
				mode="aspectFit"></image>
			<image class="final-deco-tom" src="https://files.bigtian.club/bigtian/2024/12/18/20241218154842A046.png"
				mode="aspectFit"></image>
			<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143721A006.png" alt=""
				class="final-left-image">
			<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143653A005.png" alt=""
				class="final-bottom-image">
			<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143906A009.png" alt="" class="
				final-top-image">
		</view>

		<text class="couple-names">
			Dai & Long
		</text>
		<view class="tips-container">
			<text class="tips-title">TIPS:</text>
			<view class="tips-content">
				<text>亲爱的朋友们：</text>
				<text>即使你身在远方，无法临现场</text>
				<text>我们也已收到你满满的祝福与心意 ❤️</text>
				<text>带着你最灿烂的笑容和美好的心情</text>
				<text>让我们相约在这个特别的日子 🌟</text>
				<text>专业的摄影团队会记录下每个珍贵瞬间</text>
				<text>期待与你一起创造美好回忆 📸</text>
				<text>若有招待不周之处，请多包涵 🙏</text>
			</view>
		</view>
		<view class="over-container">
			<img src="https://files.bigtian.club/bigtian/2024/12/18/20241218143338A002.png" class="over-image">
		</view>
		<view class="final-words">
			<text>好久不见，婚礼见</text>
		</view>
		<firework-effect ref="fireworkEffects"></firework-effect>
	</view>
</template>

<script setup>
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
import Calendar from '../../components/Calendar.vue';
import FireworkEffect from '../../components/firework-effect/firework-effect.vue';

const isPlaying = ref(false);
let innerAudioContext = null;
const selectedGender = ref('female');
const isAutoScrolling = ref(false);
let scrollInterval = null;
let scrollTop = 0;
const isLoading = ref(true);
const fireworkEffects = ref();

const data = reactive({
	// 女方
	brideBigLikeDay: '2025-01-08',
	brideBigLikeLunarDate: '腊月初九',
	brideBigLikeTime: '15:00',
	brideLocation: {
		longitude: 109.372788,
		latitude: 28.056580,
		address: '湘西凤凰腊尔山板豆怪村',
		name: '女方婚礼地点'
	},
	// 男方
	groomBigLikeDay: '2025-01-09',
	groomBigLikeLunarDate: '腊月初十',
	groomBigLikeTime: '15:00',
	groomLocation: {
		longitude: 109.49106574058533,
		latitude: 27.88129499833657,
		address: '湘西凤凰新场乡古林村界上',
		name: '男方婚礼地点'
	}
});

// 计算当前位置信息
const currentLocation = computed(() => {
	return selectedGender.value === 'male' ? data.groomLocation : data.brideLocation;
});

// 计算标记点
const markers = computed(() => [{
	id: 1,
	latitude: currentLocation.value.latitude,
	longitude: currentLocation.value.longitude,
	title: currentLocation.value.address,
	// iconPath: '/static/like_round.png',
	iconPath: 'https://files.bigtian.club/bigtian/2024/12/18/20241218154910A047.png',
	width: 40,
	height: 40,
	anchor: {
		x: 0.5,
		y: 1.0
	}
}]);

// 初始化音频
const initAudio = () => {
	if (!innerAudioContext) {
		innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.src = 'https://files.bigtian.club/bigtian/2024/11/30/20241130180846A006.m4a';
		innerAudioContext.loop = true;

		innerAudioContext.onPlay(() => {
			isPlaying.value = true;
		});

		innerAudioContext.onPause(() => {
			isPlaying.value = false;
		});

		innerAudioContext.onError((res) => {
			console.error('音播放误：', res.errMsg);
			isPlaying.value = false;
		});
	}
};

// 尝试播放音频
const tryPlayMusic = () => {
	if (!innerAudioContext) return;

	uni.getSetting({
		success: (res) => {
			Promise.resolve().then(() => {
				innerAudioContext.play();
			}).catch(err => {
				console.error('播放失败：', err);
			});
		}
	});
};

// 修改滚动逻辑
const startScroll = () => {
	// scrollInterval = setInterval(() => {
	// 	scrollTop += 3;
	// 	uni.pageScrollTo({
	// 		scrollTop: scrollTop,
	// 		duration: 30
	// 	});
	// }, 30);
};

// 简化触摸处理函数
const handleTouch = (e) => {
	// 如果点击的是要排除的元素，则不
	if (e.target.dataset.noscroll === 'true') {
		return;
	}

	isAutoScrolling.value = !isAutoScrolling.value;
	if (isAutoScrolling.value) {
		startScroll();
	} else {
		clearInterval(scrollInterval);
	}
};

// 修改预加载图片函数
const preloadImages = () => {
	const imageUrls = [
		// Logo和音乐控制
		'https://files.bigtian.club/bigtian/2024/12/18/20241218143241A001.png',
		'https://files.bigtian.club/bigtian/2024/12/18/20241218153814A029.png',
		'https://files.bigtian.club/bigtian/2024/12/18/20241218143559A003.png',
		// 新郎新娘照
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218142802A003.jpg',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218142430A001.jpg',
		'https://files.bigtian.club/bigtian/2024/11/30/20241130180846A006.m4a',
		// 装饰图片
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218143635A004.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218143653A005.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218143721A006.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218143742A007.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218143812A008.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218143906A009.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218143923A010.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218144133A012.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218144114A011.png',
		// // 照片墙
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218144814A015.jpg',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218145208A016.jpg',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218152319A024.jpg',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218153845A030.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218153906A031.png',
		// // 婚礼信息相关
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218153930A032.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154613A041.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154024A034.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154044A035.png',
		// // 婚纱照
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218152836A027.jpg',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218153006A028.jpg',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218152718A026.jpg',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218152555A025.jpg',
		// // 流程图标
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154138A037.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154119A036.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154223A038.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154235A039.png',
		// // 装饰元素
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154256A040.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154725A042.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154754A043.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154810A044.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154829A045.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154842A046.png',
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218154910A047.png',
		// // 结束图片
		// 'https://files.bigtian.club/bigtian/2024/12/18/20241218143338A002.png'
	];

	let loadedCount = 0;
	const totalImages = imageUrls.length;

	return new Promise((resolve) => {
		imageUrls.forEach(url => {
			uni.getImageInfo({
				src: url,
				success: () => {
					loadedCount++;
					if (loadedCount === totalImages) {
						resolve();
					}
				},
				fail: () => {
					loadedCount++;
					if (loadedCount === totalImages) {
						resolve();
					}
				}
			});
		});
	});
};

// 修改 onMounted
onMounted(async () => {
	initAudio();
	await preloadImages();
	setTimeout(() => {
		isLoading.value = false;
		tryPlayMusic();
		setTimeout(() => {
			fireworkEffects.value.handleShowEffect({
				type: 'all', //snow fireworks schoolpride realistic stars all
			})
		}, 500)
	}, 1000);
});

onUnmounted(() => {
	if (innerAudioContext) {
		innerAudioContext.destroy();
	}
	// clearInterval(scrollInterval);
});

const toggleMusic = () => {
	if (!innerAudioContext) return;

	if (isPlaying.value) {
		innerAudioContext.pause();
	} else {
		tryPlayMusic();
	}
};

const switchGender = (gender) => {
	selectedGender.value = gender;
	calculateCountdown();
};

// 添加联系方法
const contactPerson = (type) => {
	const phoneNumber = type === 'groom' ? '15575848845' : '15573084014'; // 替为实际话号码
	uni.makePhoneCall({
		phoneNumber: phoneNumber,
		fail: (err) => {
			console.error('拨打电话失败：', err);
		}
	});
};

// 打开导航
const openLocation = () => {
	const location = currentLocation.value;
	uni.openLocation({
		latitude: location.latitude,
		longitude: location.longitude,
		name: location.name,
		address: location.address,
		success: () => {
			console.log('导航打开成功');
		},
		fail: (err) => {
			console.error('导航打开失败：', err);
			// 失败后的备用方案
			uni.showModal({
				title: '导航提示',
				content: `地址：${location.address}\n是否复制地址？`,
				success: (res) => {
					if (res.confirm) {
						uni.setClipboardData({
							data: location.address,
							success: () => {
								uni.showToast({
									title: '地址已复制',
									icon: 'success'
								});
							}
						});
					}
				}
			});
		}
	});
};

const countdownDays = ref(0);
const countdownHours = ref(0);
const countdownMinutes = ref(0);
const countdownSeconds = ref(0);

// 添加一个格式化数字函数
const formatNumber = (num) => {
	return num < 10 ? `0${num}` : num;
};

// 修改计算倒计时的逻辑
const calculateCountdown = () => {
	// 根据selectedGender选择对应的婚礼日期
	const weddingDate = new Date(
		selectedGender.value === 'male'
			? `${data.groomBigLikeDay} ${data.groomBigLikeTime}`
			: `${data.brideBigLikeDay} ${data.brideBigLikeTime}`
	).getTime();

	const now = new Date().getTime();
	const distance = weddingDate - now;

	countdownDays.value = formatNumber(Math.floor(distance / (1000 * 60 * 60 * 24)));
	countdownHours.value = formatNumber(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
	countdownMinutes.value = formatNumber(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
	countdownSeconds.value = formatNumber(Math.floor((distance % (1000 * 60)) / 1000));
};

// 启倒计时
let countdownTimer = null;

onMounted(() => {
	calculateCountdown();
	countdownTimer = setInterval(calculateCountdown, 1000);

});

onUnmounted(() => {
	if (countdownTimer) {
		clearInterval(countdownTimer);
	}
});

// 分享到聊天
onShareAppMessage(() => {
	return {
		title: '龙小姐的婚礼邀请函',
		path: '/pages/index/index',
		imageUrl: 'https://files.bigtian.club/bigtian/2024/12/18/20241218152555A025.jpg'
	}
})

// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: '龙小姐的婚礼邀请函',
		path: '/pages/index/index',
		imageUrl: 'https://files.bigtian.club/bigtian/2024/12/18/20241218152555A025.jpg'
	}
})
</script>
<style>
.over-container {
	margin-bottom: 100px;
}

.over-image {
	/* 306 × 301 px */
	width: 306px;
	height: 301px;
	object-fit: contain;
}

/* 在 style 标签内添加 */
.tips-container {
	margin: 30px 20px;
	padding: 20px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.tips-title {
	color: #CD853F;
	font-size: 20px;
	font-weight: bold;
	font-family: Arial;
}

.tips-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tips-content text {
	color: #8B5E3C;
	font-size: 14px;
	line-height: 1.5;
	font-family: klt;
}

.final-top-image {
	position: absolute;
	top: 16px;
	left: -5%;
	width: 44px;
	height: 45px;
}

.final-bottom-image {
	position: absolute;
	bottom: -15px;
	left: 40%;
	width: 44px;
	height: 45px;
}

.final-left-image {
	position: absolute;
	top: 46%;
	right: -22px;
	width: 44px;
	height: 45px;
}

.right-image {
	position: absolute;
	top: 54%;
	right: 27px;
	width: 20px;
	height: 20px;
}

.three-right-image {
	position: absolute;
	top: 22%;
	right: -25px;
	width: 44px;
	height: 45px;
}

.curve-image {
	position: absolute;
	top: 40%;
	left: -25px;
	width: 44px;
	height: 45px;
}

.left-image {
	position: absolute;
	bottom: 42px;
	left: 50%;
	width: 44px;
	height: 45px;

}

.photo-cheese-top {
	width: 74px;
	height: 74px;
	position: absolute;
	left: -24px;
	top: -34px;
}

page {
	width: 100%;
	height: 100%;
	background-color: #F9D994;
	overflow-x: hidden;
}

.couple-photo {
	border: 2.5px solid rgb(112, 74, 1);
}

.ending-jerry-container {
	position: absolute;
	right: 34px;
	bottom: 34%;
}

.ending-jerry-container image {
	/* 21 × 22 px */
	width: 21px;
	height: 22px;
	object-fit: contain;
}

.ending-left-container {
	position: absolute;
	left: -11px;
	top: 37%;
}

.ending-left-container image {
	/* 34 × 36 px */
	width: 34px;
	height: 36px;
	object-fit: contain;
}

.ending-right-container {
	position: absolute;
	right: 40px;
	top: 32%;

}

.ending-jerry-right-container {
	position: absolute;
	right: -15px;
	bottom: 20%;

}

.ending-jerry-right-container image {
	/* 44 × 45 px */
	width: 44px;
	height: 45px;
	object-fit: contain;

}

.ending-right-container {
	position: absolute;
	right: 40px;
	top: 32%;

}

.ending-right-container image {
	/* 	34 × 36 px */
	width: 34px;
	height: 36px;

	object-fit: contain;
}

.ending-bottom-container {
	position: absolute;
	right: 137px;
	bottom: -6%;

}

.ending-bottom-container image {
	/* 44 × 45 px */
	width: 44px;
	height: 45px;
	object-fit: contain;
}

.content {
	background-color: #F9D994;
	margin: 0;
	padding: 0;
	width: 100vw;
	overflow-x: hidden;
	/* position: relative; */
	text-align: center;
}

.calendar-right-container {
	position: absolute;
	top: 348px;
	right: 0;
	z-index: 99;
}

.calendar-curve-container {
	position: absolute;
	top: 69px;
	left: 37px;
	z-index: 99;
}

.calendar-left-container {
	position: absolute;
	top: 233px;
	left: 0;
	z-index: 99;
}

.calendar-left-container image {
	/* 44 × 45 px */
	width: 44px;
	height: 45px;
	object-fit: contain;
}

.calendar-curve-container image {
	/* 44 × 45 px */
	width: 44px;
	height: 45px;
	object-fit: contain;
}

.calendar-top-right-container {
	position: absolute;
	top: 163px;
	right: 33px;
	z-index: 99;
}

.calendar-top-right-container image {
	position: absolute;
	top: 1px;
	right: 13px;
	z-index: 99;
}

.calendar-top-container {
	position: absolute;
	top: 0;
	right: 62px;
	z-index: 99;
}

.calendar-top-container image {
	width: 34px;
	height: 36px;
	object-fit: contain;
}

.calendar-cheese-container {
	position: absolute;
	top: 480px;
	right: 0;
	z-index: 99;
}

.calendar-cheese-container image {
	width: 88px;
	height: 84px;
	object-fit: contain;
}

.logo-container {
	position: relative;
	width: 100%;
}

.center-image {
	max-width: 100%;
	height: 588px;
	object-fit: contain;
	width: 100%;
}

.cheese-icon {
	position: absolute;
	top: 9px;
	right: 17px;
	width: 34px;
	height: 34px;
	animation: rotate 5s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.invitation-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.invitation-image {
	width: 261px;
	height: 108px;
	object-fit: contain;
}

.text-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;
	padding: 0 20px;
}

.invitation-text {
	color: #8B5E3C;
	font-size: 16px;
	line-height: 2;
	text-align: center;
	font-family: klt;
}

.couple-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 30px;
	padding: 0 20px;
	position: relative;
	/* 添加相对定位 */
}

.person-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.photo-frame {
	width: 120px;
	height: 120px;
	border-radius: 50% !important;
	border-radius: 1.68rem;
	border-width: 0.38667rem;
	border-style: solid;
	border-color: rgb(255, 197, 85);
	overflow: hidden;
}

.small-photo {
	border-radius: 1.68rem;
	border-width: 0.38667rem;
	border-style: solid;
	border-color: rgb(255, 197, 85);
}

.person-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.role-text {
	color: #CD853F;
	font-size: 18px;
	font-weight: bold;
	background-color: #FCF1D7;
	/* 背景 */
	padding: 4px 20px;
	/* 上下4px左右20px的内边距 */
	border-radius: 20px;
	/* 圆角实现胶形状 */
	margin: 10px 0;
	/* 上下距 */
}

.name-text {
	color: #8B5E3C;
	font-size: 16px;
	font-weight: bold;
}

.double-happiness {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -93px;
	/* 向上偏移 */

}

.double-happiness-image {
	width: 55px;
	height: 44px;
	object-fit: contain;
}

.hezhao-container {
	position: absolute;
	right: 114px;
	top: 2%;
}

.left-container {
	position: absolute;
	left: -5px;
	top: 27%;
}

.jerry-container {
	position: absolute;
	left: -16px;
	top: 82%;
	z-index: 100;
}

.jerry-tianshi-container {
	position: absolute;
	bottom: -23px;
	right: -10px;
	z-index: 100;
}

.jerry-tianshi-container image {
	width: 124px;
	height: 158px;
	object-fit: contain;
}

.rigth-cheese-container {
	position: absolute;
	left: -20px;
	top: 96%;
	z-index: 99;
}

.rigth-cheese-container image {
	width: 98px;
	height: 93px;
	object-fit: contain;
}

.right-container {
	position: absolute;
	right: 3px;
	top: 53%;
}

.top-right-container {
	position: absolute;
	right: 25px;
	top: 91px;
}

.tom-container {
	position: absolute;
	right: -20px;
	top: 67%;
}

.candy-container {
	position: absolute;
	left: 7px;
	bottom: -23px;
}

.candy-container image {
	width: 68px;
	height: 57px;
	object-fit: contain;
}

.jerry-container image {
	width: 79px;
	height: 110px;
	object-fit: contain;
}

.tom-container image {
	width: 142px;
	height: 207px;
	object-fit: contain;
}

.bottom-container {
	position: absolute;
	left: 49px;
	top: 76%;
}

.hezhao-image {
	width: 34px;
	height: 36px;
	object-fit: contain;
}

.pic-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px;
	position: relative;
}

.pic-image {
	width: 340px;
	height: 422px;
	margin-top: 70px;
	object-fit: contain;
	border: 10px solid #F6C769;
	border-radius: 10px;
}

.group-photo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.additional-photos {
	display: flex;
	justify-content: center;
	margin-top: 50px;
	position: relative;
}

.small-photo {
	width: 172px;
	height: 255px;
}

.wedding-info {
	margin-top: 70px;
	padding: 0 20px;
}

.info-title {
	background-color: #F9D994;
	border-radius: 15px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.title-text {
	color: #CD853F;
	font-size: 32px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

.wedding-calendar-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
}

.tom-jerry-image {
	width: 185px;
	height: 173px;
	object-fit: contain;
	margin-bottom: -30px;
	/* 可以调整与日的重叠程度 */
	z-index: 2;
	/* 确保片在日历上方 */
}

.wedding-calendar {
	position: relative;
	z-index: 1;
}

.music-control {
	position: fixed;
	top: 99px;
	right: 3px;
	width: 34px;
	height: 34px;
	cursor: pointer;
	z-index: 999;
}

.cheese-icon {
	width: 100%;
	height: 100%;
}

.rotating {
	animation: rotate 5s linear infinite;
}

.paused {
	animation: none;
	position: relative;
}

.paused::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	background-color: #FFFFFF;
	top: 0;
	left: 50%;
	transform: rotate(45deg);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.map-container {
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.location-title {
	color: #CD853F;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

.wedding-map {
	width: 100%;
	height: 300px;
	border-radius: 12px;
	overflow: hidden;
	border: 6px solid #F6C769;
	position: relative;
}

.location-address {
	color: #8B5E3C;
	font-size: 16px;
	margin-top: 16px;
	text-align: center;
	font-family: klt;
	padding: 10rpx;
}

/* 添加点击效果 */
.location-address:active {
	opacity: 0.7;
}

.gender-switch {
	position: absolute;
	top: 88px;
	right: 20px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	padding: 2px;
	z-index: 101;
}

.gender-switch text {
	display: inline-block;
	padding: 4px 12px;
	color: #8B5E3C;
	font-size: 12px;
	border-radius: 20px;
}

.gender-switch text.active {
	background: #F6C769;
	color: #FFF;
}

/* 修改联系按钮的样式 */
.contact-buttons {
	display: flex;
	justify-content: center;
	/* 居中对齐 */
	gap: 20px;
	/* 按钮之间的间距 */
	margin-top: 20px;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.contact-btn {
	flex: 0 1 auto;
	padding: 8px 24px;
	/* 调整内边距 */
	border-radius: 25px;
	/* 增加圆角 */
	border: none;
	min-width: 130px;
	/* 设置最小宽度 */
	height: 44px;
	/* 固定高度 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* 图标和字之间的间距 */
	font-size: 15px;
	color: #8B5E3C;
	transition: all 0.3s ease;
	box-shadow: 0 2px 6px rgba(139, 94, 60, 0.2);
}

/* 新郎按钮样式 */
.contact-btn.groom {
	background-color: #F6C769 !important;
}

/* 新娘按钮样式 */
.contact-btn.bride {
	background-color: #FFE4E1 !important;
}

/* 图标样式 */
.contact-btn .icon {
	font-size: 20px;
	/* 调整图标大小 */
	line-height: 1;
}

/* 按钮点击效果 */
.contact-btn:active {
	transform: scale(0.98);
	box-shadow: 0 1px 3px rgba(139, 94, 60, 0.2);
}

/* 移除按钮默认样式 */
button.contact-btn::after {
	border: none;
}

.map-wrapper {
	position: relative;
	width: 100%;
	height: 300px;
}

.map-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background-color: transparent;
}

.wedding-map {
	width: 100%;
	height: 300px;
	border-radius: 12px;
	overflow: hidden;
	border: 6px solid #F6C769;
	pointer-events: none;
	/* 用地图的指针事件 */
}

.ending-quote {
	display: block;
	text-align: center;
	padding: 40px 20px;
	color: #8B5E3C;
	font-size: 18px;
	font-family: klt;
	line-height: 1.5;
	margin: 30px auto;
	position: relative;
	background: linear-gradient(180deg, transparent, rgba(246, 199, 105, 0.3) 20%, rgba(246, 199, 105, 0.3) 80%, transparent);
}

.ending-quote::before,
.ending-quote::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 60px;
	height: 2px;
	background: #F6C769;
	transform: translateX(-50%);
}

.ending-quote::before {
	top: 20px;
}

.ending-quote::after {
	bottom: 20px;
}

.ending-section {
	padding: 20px;
	margin: 0 auto;
	width: 90%;
}

.ending-title {
	display: block;
	text-align: center;
	color: #8B5E3C;
	font-size: 18px;
	font-family: klt;
	margin-bottom: 15px;
}

.ending-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	padding: 4px;
	/* background: #FFF5E1; */
	border-radius: 8px;
	position: relative;
	/* border: 1px solid #F6C769; */
}

.grid-item {
	aspect-ratio: 1;
	overflow: hidden;
}

.grid-item image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 移除之前的margin-top */
.wedding-info+.ending-section {
	margin-top: 0;
}

.wedding-process {
	padding: 20px;
	margin: 30px 0;
	/* 调整上下间距 */
}

.process-title {
	text-align: center;
	padding: 20px 0;
	margin-bottom: 20px;
}

.process-title text {
	color: #CD853F;
	font-size: 32px;
	font-weight: bold;
	font-family: Arial;
	background-color: #F9D994;
	padding: 10px 30px;
	border-radius: 10px;
	display: inline-block;
}

.process-container {
	background-color: #F9D994;
	border-radius: 20px;
	padding: 60px 40px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	/* box-shadow: 0 4px 12px rgba(205, 133, 63, 0.1); */
}

.process-item {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 40px;
	position: relative;
}

.time-box {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 30px;
	padding: 10px 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.time-box text:first-child {
	color: #CD853F;
	font-size: 20px;
	font-weight: bold;
}

.time-box text:last-child {
	color: #8B5E3C;
	font-size: 16px;
	margin-top: 4px;
}

.church-icon {
	width: 80px;
	height: 80px;
	position: static;
	transform: none;
	margin: 0;
	object-fit: contain;
}

.icon {
	width: 40px;
	height: 40px;
	position: absolute;
}

.left {
	padding-right: 50%;
}

.right {
	padding-left: 50%;
	justify-content: flex-end;
}

.left .icon {
	right: calc(50% + 20px);
}

.right .icon {
	left: calc(50% + 20px);
}

.process-item:last-child {
	margin-bottom: 0;
}

.wedding-process {
	padding: 20px;
}

.process-container {
	background-color: #F9D994;
	border-radius: 20px;
	padding: 40px 20px;
	position: relative;
}

.process-row {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	gap: 55px;
	width: 100%;
	margin: 0;
}

.time-label {
	background-color: rgb(255, 240, 212);
	border-radius: 30px;
	padding: 8px 20px;
	min-width: 120px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(205, 133, 63, 0.1);
}

.time-label text {
	font-size: 18px;
	letter-spacing: 0.5px;
	color: rgb(205, 130, 46);
}

.time-label text:first-child {
	color: rgb(205, 130, 46);
	font-weight: bold;
	margin-right: 5px;
}

.time-label text:last-child {
	color: rgb(205, 130, 46);
}

.church-icon {
	width: 80px;
	height: 80px;
	position: static;
	transform: none;
	margin: 0;
	object-fit: contain;
}

.car-icon {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

.ring-icon,
.wine-icon {
	width: 80px;
	height: 80px;
	position: static;
	object-fit: contain;
}

.ring-icon,
.wine-icon {
	width: 80px;
	height: 80px;
}

.process-row:nth-child(odd) {
	padding-right: 0;
}

.process-row:nth-child(even) {
	padding-left: 0;
	flex-direction: row;
}

.process-row:last-child {
	margin-bottom: 0;
}

.blank-icon {
	width: 40px;
	height: 40px;
	visibility: hidden;
}

.love-quote {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px;
	margin: 30px 20px;
	border-radius: 15px;
}

.love-quote text {
	color: rgb(205, 130, 46);
	font-size: 16px;
	line-height: 2;
	text-align: center;
	font-family: klt;
}

.photo-moment-container {
	margin: 20px;
	position: relative;
}

.photo-frame-border {
	background: #FFF8E7;
	padding: 27px;
	border-radius: 12rpx;
	position: relative;
	border: 4rpx solid #704A01;
	width: 273px;
	margin: 0 auto;
	padding-bottom: 60px;

}

.wedding-moment {
	width: 100%;
	height: 352px;
	object-fit: cover;
	border-radius: 8rpx;
}

.frame-decorations {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.deco-cheese-top {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	left: -10rpx;
	top: -10rpx;
}

.deco-cheese-bottom {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	right: -10rpx;
	bottom: -10rpx;
}

.deco-jerry-bottom {
	position: absolute;
	width: 60rpx;
	height: 60rpx;
	left: -15rpx;
	bottom: -20rpx;
}

.deco-tom-bottom {
	position: absolute;
	width: 208px;
	height: 197px;
	right: -66px;
	bottom: -20px;
	object-fit: contain;
}

.curve-deco-top {
	position: absolute;
	width: 30rpx;
	height: 30rpx;
	border-width: 3rpx;
	right: 20rpx;
	top: -94rpx;
	transform: rotate(-21deg);
}

.curve-deco-bottom {
	position: absolute;
	width: 30rpx;
	height: 30rpx;
	border-width: 3rpx;
	left: 20rpx;
	bottom: -15rpx;
	border: 3rpx solid #FF9999;
	border-radius: 50%;
	border-top-color: transparent;
	border-right-color: transparent;
	transform: rotate(-45deg);
}

.social-interaction {
	margin-top: 20rpx;
	padding: 0 40rpx;
}

.like-comment {
	display: flex;
	gap: 40rpx;
	justify-content: center;
	font-size: 28rpx;
	color: #8B5E3C;
}

.like-count,
.comment-count {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.love-number-image {
	height: 68px;
	width: 207px;
	display: block;
	margin-left: 0;
	object-fit: contain;
	position: absolute;
	bottom: 0;
	left: 0;
}

.jerry-cheese-image {
	height: 150px;
	width: 150px;
	position: absolute;
	left: -72px;
	bottom: 37px;
}

.like-heart-icon {
	height: 66px;
	width: 59px;
	position: absolute;
	right: 48px;
	bottom: 7px;
	z-index: 99;
}

.curve-top-image {
	height: 50px;
	width: 50px;
}

.countdown-container {
	padding: 20px;
	margin: 20px;
	/* 移除背景色和阴影 */
}

.countdown-title {
	text-align: center;
	color: #CD853F;
	font-size: 28px;
	/* 减小字号 */
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
}

.countdown-boxes {
	display: flex;
	justify-content: center;
	gap: 10px;
	/* 减小间��� */
}

.countdown-box {
	background: #FFF8E7;
	padding: 8px 12px;
	/* 减小内边距 */
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 50px;
	/* 减小最小宽度 */
}

.count {
	color: #CD853F;
	font-size: 24px;
	/* 减小字号 */
	font-weight: bold;
	line-height: 1.2;
}

.unit {
	color: #8B5E3C;
	font-size: 12px;
	/* 减小字号 */
	margin-top: 3px;
}

.final-photo-frame {
	position: relative;
	background: rgb(255, 197, 85);
	padding: 8px;
	border-radius: 20px;
	margin: 24px;
	/* box-shadow: 0 4px 8px rgba(205, 133, 63, 0.1); */
}

.final-couple-photo {
	width: 100%;
	aspect-ratio: 4/3;
	border-radius: 10px;
	object-fit: cover;
}

.final-deco-jerry {
	position: absolute;
	width: 76px;
	height: 99px;
	left: -20px;
	bottom: -10px;
	z-index: 2;

}

.final-deco-tom {
	position: absolute;
	width: 163px;
	height: 99px;
	right: -21px;
	bottom: -15px;
	z-index: 2;
}

.final-frame-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid #CD853F;
	border-radius: 20px;
	pointer-events: none;
}

.couple-names {
	display: block;
	text-align: center;
	color: #CD853F;
	font-size: 20px;
	font-weight: bold;
	margin: 20px 0;
	font-family: Arial;
}

.final-words {
	margin: 30px 0;
	text-align: center;
}

.final-words text {
	font-family: "STKaiti", "华文楷体", serif;
	color: #CD853F;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1.5;
	padding: 15px 30px;
	position: relative;
}

.final-words text::before,
.final-words text::after {
	content: '~';
	position: absolute;
	color: #CD853F;
	font-size: 24px;
}

.final-words text::before {
	left: 0;
}

.final-words text::after {
	right: 0;
}

/* 添加加载蒙版样式 */
.loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #F9D994;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.loading-image {
	width: 120px;
	height: 120px;
	margin-bottom: 20px;
	animation: bounce 1s infinite alternate;
	border-radius: 20px;
	/* 使用具体的像素值来设置圆角 */
}

.loading-text {
	color: #CD853F;
	font-size: 16px;
	font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

@keyframes bounce {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-10px);
	}
}
</style>
